<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        background: url(img/b.png);
        height: 4000px;

    }

    p {
        text-decoration: none;
        position: fixed;
        right: 20px;
        bottom: 50px;
        display: block;
        height: 100px;
        width: 100px;
        background: url(img/timg.gif);
        background-size: 100% 100%;
        border-radius: 50%;
        /* animation: move 1s infinite steps(4); */
        transition: all 2s;
    }

    div {
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    .active {

        transform: translateY(-1000px)
    }


    /* 
    @keyframes move {
        0% {
            background-position: -447px 0px;
        }

        /* 25% {
            background-position: -447px 0px;
        }

        50% {
            background-position: -596px 0px;
        }

        75% {
            background-position: -745px 0px;
        } */

    /* 100% {
        background-position: -745px 0px;
    } */
</style>

<body>
    <div>
        <p id="bt"></p>
    </div>
</body>
<script>
    (function () {
        //找节点
        var bt = document.querySelector('#bt');
        //添加一个消失出现事件
        window.onscroll = function () {
            if (window.scrollY <= 300) {
                bt.className = 'active';

            } else {
                bt.className = '';
            }

        }
        //按钮事件
        bt.onclick = function () {
            var tosscrollY = window.scrollY; //获取滚动距离
            var timer = setInterval(function () {
                if (tosscrollY <= 0) {

                    clearInterval(timer);

                } else {

                    tosscrollY -= 50;
                    window.scroll(0, tosscrollY);
                }
            }, 30)
        }
    })();
</script>

</html>